<template>
  <div class="sp-gas">
    <span class="icon-gas">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 40 40" version="1.1">
        <defs>
            <polygon id="path-1" points="9.3232 0.209852632 9.1984 20.9715088 0.1756 15.5660351"/>
            <linearGradient x1="-0.00177401723%" y1="49.9995327%" x2="100.001143%" y2="49.9995327%" id="linearGradient-3">
                <stop stop-color="#F45654" offset="0%"/>
                <stop stop-color="#FBCD31" offset="100%"/>
            </linearGradient>
            <polygon id="path-4" points="8.8032 0.385515789 18.1816 4.80814035 9.3036 9.968 0.1756 4.56252632"/>
            <linearGradient x1="-0.000901255137%" y1="49.9994537%" x2="99.9999449%" y2="49.9994537%" id="linearGradient-6">
                <stop stop-color="#F45654" offset="0%"/>
                <stop stop-color="#FBCD31" offset="100%"/>
            </linearGradient>
            <path d="M19.688966,0.418584615 L10.3054189,5.84459487 L0.921871698,0.418584615 C0.672664151,0.274379487 0.35634717,0.322317949 0.16090566,0.533558974 L0.16090566,0.533558974 C0.0569056604,0.646584615 0.00274716981,0.790010256 0,0.934994872 L0,0.934994872 L0,0.9576 C0.00235471698,1.07569231 0.039245283,1.19378462 0.111849057,1.29628718 L0.111849057,1.29628718 L9.8042566,14.9419897 C9.91924528,15.1037333 10.1060528,15.2 10.3054189,15.2 L10.3054189,15.2 C10.5047849,15.2 10.6919849,15.1037333 10.8065811,14.9419897 L10.8065811,14.9419897 L20.4985962,1.29628718 C20.5731623,1.19144615 20.6100528,1.06945641 20.6108377,0.948246154 L20.6108377,0.948246154 L20.6108377,0.941230769 C20.6096604,0.794297436 20.5555019,0.64814359 20.4495396,0.533558974 L20.4495396,0.533558974 C20.3298415,0.404164103 20.1646189,0.335822121 19.9970415,0.335822121 L19.9970415,0.335822121 C19.8914717,0.335822121 19.785117,0.362851282 19.688966,0.418584615" id="path-7"/>
            <linearGradient x1="22.0768232%" y1="13.1623611%" x2="86.4337907%" y2="59.2550811%" id="linearGradient-9">
                <stop stop-color="#F45654" offset="0%"/>
                <stop stop-color="#F9A831" offset="100%"/>
            </linearGradient>
            <path d="M10.304634,0.16008 C10.2857962,0.16008 10.266566,0.160466667 10.2481208,0.162013333 L10.2481208,0.162013333 C10.2277132,0.163946667 10.2073057,0.167426667 10.1872906,0.171293333 L10.1872906,0.171293333 C10.1684528,0.174773333 10.1496151,0.179026667 10.1315623,0.184826667 L10.1315623,0.184826667 C10.1123321,0.19024 10.0938868,0.196813333 10.0754415,0.20416 L10.0754415,0.20416 C10.0554264,0.21228 10.0365887,0.221173333 10.0173585,0.23084 L10.0173585,0.23084 C10.0083321,0.23548 9.99969811,0.2378 9.9906717,0.243213333 L9.9906717,0.243213333 C9.98321509,0.247853333 9.97693585,0.25404 9.96908679,0.25868 L9.96908679,0.25868 C9.95142642,0.270666667 9.93376604,0.283426667 9.91689057,0.297346667 L9.91689057,0.297346667 C9.90158491,0.30972 9.88706415,0.322093333 9.8733283,0.335626667 L9.8733283,0.335626667 C9.85959245,0.34916 9.84664151,0.363853333 9.83408302,0.378933333 L9.83408302,0.378933333 C9.82034717,0.39556 9.80661132,0.412573333 9.79523019,0.430746667 L9.79523019,0.430746667 C9.7901283,0.438093333 9.7834566,0.443893333 9.77874717,0.452013333 L9.77874717,0.452013333 L0.0871245283,16.40704 C0.0867320755,16.4082 0.0863396226,16.40936 0.0851622642,16.41052 L0.0851622642,16.41052 C0.0847698113,16.41168 0.0839849057,16.4120667 0.0832,16.4136133 L0.0832,16.4136133 C0.0737811321,16.4294667 0.0682867925,16.4468667 0.0604377358,16.4634933 L0.0604377358,16.4634933 C0.0510188679,16.4828267 0.0404226415,16.5017733 0.0333584906,16.5214933 L0.0333584906,16.5214933 C0.0266867925,16.54044 0.0239396226,16.559 0.0192301887,16.5779467 L0.0192301887,16.5779467 C0.0149132075,16.59728 0.00824150943,16.6173867 0.00549433962,16.6371067 L0.00549433962,16.6371067 C0.00274716981,16.65644 0.0039245283,16.6757733 0.00313962264,16.6951067 L0.00313962264,16.6951067 C0.00235471698,16.7148267 0.00039245283,16.73416 0.00156981132,16.7534933 L0.00156981132,16.7534933 C0.00235471698,16.7732133 0.00706415094,16.7917733 0.0102037736,16.8114933 L0.0102037736,16.8114933 C0.0129509434,16.8300533 0.0149132075,16.8497733 0.0196226415,16.8679467 L0.0196226415,16.8679467 C0.0247245283,16.8868933 0.0329660377,16.90468 0.0396377358,16.92324 L0.0396377358,16.92324 C0.046309434,16.9410267 0.0514113208,16.9595867 0.0596528302,16.9769867 L0.0596528302,16.9769867 C0.0682867925,16.9943867 0.0796679245,17.0106267 0.0898716981,17.0272533 L0.0898716981,17.0272533 C0.100467925,17.0442667 0.109101887,17.0616667 0.120875472,17.0771333 L0.120875472,17.0771333 C0.132256604,17.0929867 0.147169811,17.10652 0.16090566,17.1212133 L0.16090566,17.1212133 C0.174249057,17.1362933 0.186415094,17.15176 0.201720755,17.1652933 L0.201720755,17.1652933 C0.216633962,17.17844 0.233901887,17.18888 0.250384906,17.2008667 L0.250384906,17.2008667 C0.266867925,17.2128533 0.280603774,17.226 0.298264151,17.2360533 L0.298264151,17.2360533 C0.299833962,17.2372133 0.301011321,17.2372133 0.302581132,17.2379867 L0.302581132,17.2379867 L0.304935849,17.23992 L9.99655849,22.8001867 C9.99773585,22.8005733 9.99891321,22.8013467 10.0000906,22.8017333 L10.0000906,22.8017333 C10.0157887,22.8106267 10.0318792,22.8179733 10.0483623,22.82532 L10.0483623,22.82532 C10.0569962,22.8291867 10.0648453,22.83344 10.0734792,22.8373067 L10.0734792,22.8373067 C10.0856453,22.8419467 10.0982038,22.8454267 10.1103698,22.84968 L10.1103698,22.84968 C10.1237132,22.8535467 10.1362717,22.85896 10.1496151,22.86244 L10.1496151,22.86244 C10.1504,22.86244 10.1507925,22.86244 10.1511849,22.86244 L10.1511849,22.86244 C10.2018113,22.8755867 10.2532226,22.88216 10.3050264,22.88216 L10.3050264,22.88216 L10.3054189,22.88216 L10.3058113,22.88216 C10.3721358,22.88216 10.4392453,22.87056 10.5036075,22.84852 L10.5036075,22.84852 C10.5145962,22.8446533 10.5263698,22.84156 10.536966,22.8373067 L10.536966,22.8373067 C10.5463849,22.83344 10.5558038,22.8284133 10.5652226,22.82416 L10.5652226,22.82416 C10.5805283,22.8172 10.5954415,22.81024 10.6107472,22.8017333 L10.6107472,22.8017333 C10.6119245,22.8013467 10.6127094,22.80096 10.6138868,22.8001867 L10.6138868,22.8001867 L20.3062943,17.23992 C20.3082566,17.2383733 20.3106113,17.23644 20.3125736,17.2348933 L20.3125736,17.2348933 C20.3439698,17.2163333 20.3741887,17.1954533 20.4016604,17.17148 L20.4016604,17.17148 C20.4075472,17.1664533 20.4126491,17.1602667 20.4185358,17.15524 L20.4185358,17.15524 C20.4389434,17.1362933 20.458566,17.1154133 20.475834,17.0933733 L20.475834,17.0933733 C20.4832906,17.08448 20.4903547,17.0759733 20.496634,17.0666933 L20.496634,17.0666933 C20.5119396,17.0454267 20.5264604,17.0222267 20.5386264,16.9978667 L20.5386264,16.9978667 C20.5429434,16.9901333 20.5476528,16.9827867 20.5515774,16.9750533 L20.5515774,16.9750533 C20.5531472,16.9727333 20.5543245,16.9711867 20.5551094,16.9688667 L20.5551094,16.9688667 C20.5609962,16.9561067 20.5637434,16.94296 20.5688453,16.9302 L20.5688453,16.9302 C20.5770868,16.9077733 20.5865057,16.8853467 20.592,16.8625333 L20.592,16.8625333 C20.5967094,16.8435867 20.5986717,16.82464 20.6014189,16.8053067 L20.6014189,16.8053067 C20.604166,16.7859733 20.6080906,16.76664 20.6092679,16.7465333 L20.6092679,16.7465333 C20.6100528,16.7268133 20.608483,16.70748 20.6076981,16.68776 L20.6076981,16.68776 C20.6065208,16.6684267 20.6061283,16.6487067 20.6033811,16.6293733 L20.6033811,16.6293733 C20.600634,16.6096533 20.5947472,16.5907067 20.5900377,16.57176 L20.5900377,16.57176 C20.5853283,16.5528133 20.5814038,16.5338667 20.5747321,16.5156933 L20.5747321,16.5156933 C20.566883,16.4932667 20.5555019,16.4723867 20.5449057,16.4507333 L20.5449057,16.4507333 C20.538234,16.4387467 20.5343094,16.4256 20.5272453,16.4136133 L20.5272453,16.4136133 C20.5264604,16.41168 20.5248906,16.4101333 20.5237132,16.4085867 L20.5237132,16.4085867 C20.5103698,16.3857733 20.4934943,16.36528 20.4770113,16.3444 L20.4770113,16.3444 C20.4683774,16.33396 20.4609208,16.3219733 20.4518943,16.31192 L20.4518943,16.31192 C20.4385509,16.2972267 20.4228528,16.28524 20.4075472,16.2720933 L20.4075472,16.2720933 C20.392634,16.25856 20.3785057,16.2438667 20.3620226,16.23188 L20.3620226,16.23188 C20.3514264,16.2241467 20.3388679,16.2183467 20.3270943,16.211 L20.3270943,16.211 C20.3043321,16.1966933 20.2819623,16.1823867 20.2580226,16.1707867 L20.2580226,16.1707867 C20.2560604,16.1700133 20.2544906,16.1688533 20.2525283,16.16808 L20.2525283,16.16808 L10.5605132,11.803 C10.2520453,11.6641867 9.88784906,11.7979733 9.74735094,12.1015067 L9.74735094,12.1015067 C9.60685283,12.40504 9.74224906,12.76348 10.0503245,12.9022933 L10.0503245,12.9022933 L18.6654491,16.7821067 L10.3054189,21.57832 L1.45835472,16.5029333 L10.3050264,1.94029333 L14.3178566,8.56621333 C14.4328453,8.75568 14.6361358,8.86085333 14.8453132,8.86085333 L14.8453132,8.86085333 C14.9520604,8.86085333 15.0603774,8.83301333 15.158883,8.7754 L15.158883,8.7754 C15.450083,8.60410667 15.5450566,8.23329333 15.3712,7.94677333 L15.3712,7.94677333 L10.8320906,0.4524 C10.8277736,0.444666667 10.8211019,0.438866667 10.8163925,0.43152 L10.8163925,0.43152 C10.8042264,0.413346667 10.7912755,0.396333333 10.7771472,0.37932 L10.7771472,0.37932 C10.7645887,0.36424 10.7516377,0.349933333 10.7382943,0.3364 L10.7382943,0.3364 C10.7245585,0.322866667 10.7100377,0.310493333 10.6943396,0.297733333 L10.6943396,0.297733333 C10.6770717,0.283813333 10.6601962,0.271053333 10.6417509,0.259066667 L10.6417509,0.259066667 C10.6342943,0.254426667 10.6284075,0.247853333 10.6205585,0.2436 L10.6205585,0.2436 C10.6119245,0.238573333 10.6032906,0.235866667 10.5946566,0.231613333 L10.5946566,0.231613333 C10.5754264,0.221173333 10.5554113,0.21228 10.5346113,0.203773333 L10.5346113,0.203773333 C10.5169509,0.196813333 10.4992906,0.190626667 10.4816302,0.185213333 L10.4816302,0.185213333 C10.4620075,0.179413333 10.4423849,0.174773333 10.4223698,0.171293333 L10.4223698,0.171293333 C10.4035321,0.167426667 10.3843019,0.163946667 10.3650717,0.1624 L10.3650717,0.1624 C10.3450566,0.160466667 10.3246491,0.16008 10.304634,0.16008 Z" id="path-10"/>
            <linearGradient x1="-0.000823727141%" y1="49.9999246%" x2="100.000022%" y2="49.9999246%" id="linearGradient-12">
                <stop stop-color="#F45654" offset="0%"/>
                <stop stop-color="#F9A831" offset="100%"/>
            </linearGradient>
        </defs>
        <g id="v1.3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="GAS-NOW--（导航+新增链上gasprice均值）" transform="translate(-119.000000, -7.000000)">
                <g id="编组-15" transform="translate(-1.000000, 0.000000)">
                    <g id="编组-11" transform="translate(120.000000, 7.000000)">
                        <rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="39" height="39"/>
                        <g id="编组" transform="translate(9.600000, 2.400000)">
                            <g transform="translate(1.146667, 0.800000)">
                                <g>
                                    <mask id="mask-2" fill="white">
                                        <use xlink:href="#path-1"/>
                                    </mask>
                                    <g id="Clip-2"/>
                                    <polygon id="Fill-1" fill-opacity="0.4" fill="url(#linearGradient-3)" mask="url(#mask-2)" points="9.3232 0.209852632 0.1756 15.5660351 9.1984 20.9715088"/>
                                </g>
                                <g transform="translate(0.000000, 11.003509)">
                                    <mask id="mask-5" fill="white">
                                        <use xlink:href="#path-4"/>
                                    </mask>
                                    <g id="Clip-4"/>
                                    <polygon id="Fill-3" fill-opacity="0.4" fill="url(#linearGradient-6)" mask="url(#mask-5)" points="0.1756 4.56252632 8.8032 0.385515789 18.1816 4.80814035 9.3036 9.968"/>
                                </g>
                            </g>
                            <g transform="translate(0.346667, 20.000000)">
                                <mask id="mask-8" fill="white">
                                    <use xlink:href="#path-7"/>
                                </mask>
                                <g id="Clip-6"/>
                                <path d="M19.688966,0.418584615 L10.3054189,5.84459487 L0.921871698,0.418584615 C0.672664151,0.274379487 0.35634717,0.322317949 0.16090566,0.533558974 L0.16090566,0.533558974 C0.0569056604,0.646584615 0.00274716981,0.790010256 0,0.934994872 L0,0.934994872 L0,0.9576 C0.00235471698,1.07569231 0.039245283,1.19378462 0.111849057,1.29628718 L0.111849057,1.29628718 L9.8042566,14.9419897 C9.91924528,15.1037333 10.1060528,15.2 10.3054189,15.2 L10.3054189,15.2 C10.5047849,15.2 10.6919849,15.1037333 10.8065811,14.9419897 L10.8065811,14.9419897 L20.4985962,1.29628718 C20.5731623,1.19144615 20.6100528,1.06945641 20.6108377,0.948246154 L20.6108377,0.948246154 L20.6108377,0.941230769 C20.6096604,0.794297436 20.5555019,0.64814359 20.4495396,0.533558974 L20.4495396,0.533558974 C20.3298415,0.404164103 20.1646189,0.335822121 19.9970415,0.335822121 L19.9970415,0.335822121 C19.8914717,0.335822121 19.785117,0.362851282 19.688966,0.418584615" id="Fill-5" fill="url(#linearGradient-9)" mask="url(#mask-8)"/>
                            </g>
                            <g transform="translate(0.346667, 0.000000)">
                                <mask id="mask-11" fill="white">
                                    <use xlink:href="#path-10"/>
                                </mask>
                                <g id="Clip-8"/>
                                <path d="M10.304634,0.16008 C10.2857962,0.16008 10.266566,0.160466667 10.2481208,0.162013333 L10.2481208,0.162013333 C10.2277132,0.163946667 10.2073057,0.167426667 10.1872906,0.171293333 L10.1872906,0.171293333 C10.1684528,0.174773333 10.1496151,0.179026667 10.1315623,0.184826667 L10.1315623,0.184826667 C10.1123321,0.19024 10.0938868,0.196813333 10.0754415,0.20416 L10.0754415,0.20416 C10.0554264,0.21228 10.0365887,0.221173333 10.0173585,0.23084 L10.0173585,0.23084 C10.0083321,0.23548 9.99969811,0.2378 9.9906717,0.243213333 L9.9906717,0.243213333 C9.98321509,0.247853333 9.97693585,0.25404 9.96908679,0.25868 L9.96908679,0.25868 C9.95142642,0.270666667 9.93376604,0.283426667 9.91689057,0.297346667 L9.91689057,0.297346667 C9.90158491,0.30972 9.88706415,0.322093333 9.8733283,0.335626667 L9.8733283,0.335626667 C9.85959245,0.34916 9.84664151,0.363853333 9.83408302,0.378933333 L9.83408302,0.378933333 C9.82034717,0.39556 9.80661132,0.412573333 9.79523019,0.430746667 L9.79523019,0.430746667 C9.7901283,0.438093333 9.7834566,0.443893333 9.77874717,0.452013333 L9.77874717,0.452013333 L0.0871245283,16.40704 C0.0867320755,16.4082 0.0863396226,16.40936 0.0851622642,16.41052 L0.0851622642,16.41052 C0.0847698113,16.41168 0.0839849057,16.4120667 0.0832,16.4136133 L0.0832,16.4136133 C0.0737811321,16.4294667 0.0682867925,16.4468667 0.0604377358,16.4634933 L0.0604377358,16.4634933 C0.0510188679,16.4828267 0.0404226415,16.5017733 0.0333584906,16.5214933 L0.0333584906,16.5214933 C0.0266867925,16.54044 0.0239396226,16.559 0.0192301887,16.5779467 L0.0192301887,16.5779467 C0.0149132075,16.59728 0.00824150943,16.6173867 0.00549433962,16.6371067 L0.00549433962,16.6371067 C0.00274716981,16.65644 0.0039245283,16.6757733 0.00313962264,16.6951067 L0.00313962264,16.6951067 C0.00235471698,16.7148267 0.00039245283,16.73416 0.00156981132,16.7534933 L0.00156981132,16.7534933 C0.00235471698,16.7732133 0.00706415094,16.7917733 0.0102037736,16.8114933 L0.0102037736,16.8114933 C0.0129509434,16.8300533 0.0149132075,16.8497733 0.0196226415,16.8679467 L0.0196226415,16.8679467 C0.0247245283,16.8868933 0.0329660377,16.90468 0.0396377358,16.92324 L0.0396377358,16.92324 C0.046309434,16.9410267 0.0514113208,16.9595867 0.0596528302,16.9769867 L0.0596528302,16.9769867 C0.0682867925,16.9943867 0.0796679245,17.0106267 0.0898716981,17.0272533 L0.0898716981,17.0272533 C0.100467925,17.0442667 0.109101887,17.0616667 0.120875472,17.0771333 L0.120875472,17.0771333 C0.132256604,17.0929867 0.147169811,17.10652 0.16090566,17.1212133 L0.16090566,17.1212133 C0.174249057,17.1362933 0.186415094,17.15176 0.201720755,17.1652933 L0.201720755,17.1652933 C0.216633962,17.17844 0.233901887,17.18888 0.250384906,17.2008667 L0.250384906,17.2008667 C0.266867925,17.2128533 0.280603774,17.226 0.298264151,17.2360533 L0.298264151,17.2360533 C0.299833962,17.2372133 0.301011321,17.2372133 0.302581132,17.2379867 L0.302581132,17.2379867 L0.304935849,17.23992 L9.99655849,22.8001867 C9.99773585,22.8005733 9.99891321,22.8013467 10.0000906,22.8017333 L10.0000906,22.8017333 C10.0157887,22.8106267 10.0318792,22.8179733 10.0483623,22.82532 L10.0483623,22.82532 C10.0569962,22.8291867 10.0648453,22.83344 10.0734792,22.8373067 L10.0734792,22.8373067 C10.0856453,22.8419467 10.0982038,22.8454267 10.1103698,22.84968 L10.1103698,22.84968 C10.1237132,22.8535467 10.1362717,22.85896 10.1496151,22.86244 L10.1496151,22.86244 C10.1504,22.86244 10.1507925,22.86244 10.1511849,22.86244 L10.1511849,22.86244 C10.2018113,22.8755867 10.2532226,22.88216 10.3050264,22.88216 L10.3050264,22.88216 L10.3054189,22.88216 L10.3058113,22.88216 C10.3721358,22.88216 10.4392453,22.87056 10.5036075,22.84852 L10.5036075,22.84852 C10.5145962,22.8446533 10.5263698,22.84156 10.536966,22.8373067 L10.536966,22.8373067 C10.5463849,22.83344 10.5558038,22.8284133 10.5652226,22.82416 L10.5652226,22.82416 C10.5805283,22.8172 10.5954415,22.81024 10.6107472,22.8017333 L10.6107472,22.8017333 C10.6119245,22.8013467 10.6127094,22.80096 10.6138868,22.8001867 L10.6138868,22.8001867 L20.3062943,17.23992 C20.3082566,17.2383733 20.3106113,17.23644 20.3125736,17.2348933 L20.3125736,17.2348933 C20.3439698,17.2163333 20.3741887,17.1954533 20.4016604,17.17148 L20.4016604,17.17148 C20.4075472,17.1664533 20.4126491,17.1602667 20.4185358,17.15524 L20.4185358,17.15524 C20.4389434,17.1362933 20.458566,17.1154133 20.475834,17.0933733 L20.475834,17.0933733 C20.4832906,17.08448 20.4903547,17.0759733 20.496634,17.0666933 L20.496634,17.0666933 C20.5119396,17.0454267 20.5264604,17.0222267 20.5386264,16.9978667 L20.5386264,16.9978667 C20.5429434,16.9901333 20.5476528,16.9827867 20.5515774,16.9750533 L20.5515774,16.9750533 C20.5531472,16.9727333 20.5543245,16.9711867 20.5551094,16.9688667 L20.5551094,16.9688667 C20.5609962,16.9561067 20.5637434,16.94296 20.5688453,16.9302 L20.5688453,16.9302 C20.5770868,16.9077733 20.5865057,16.8853467 20.592,16.8625333 L20.592,16.8625333 C20.5967094,16.8435867 20.5986717,16.82464 20.6014189,16.8053067 L20.6014189,16.8053067 C20.604166,16.7859733 20.6080906,16.76664 20.6092679,16.7465333 L20.6092679,16.7465333 C20.6100528,16.7268133 20.608483,16.70748 20.6076981,16.68776 L20.6076981,16.68776 C20.6065208,16.6684267 20.6061283,16.6487067 20.6033811,16.6293733 L20.6033811,16.6293733 C20.600634,16.6096533 20.5947472,16.5907067 20.5900377,16.57176 L20.5900377,16.57176 C20.5853283,16.5528133 20.5814038,16.5338667 20.5747321,16.5156933 L20.5747321,16.5156933 C20.566883,16.4932667 20.5555019,16.4723867 20.5449057,16.4507333 L20.5449057,16.4507333 C20.538234,16.4387467 20.5343094,16.4256 20.5272453,16.4136133 L20.5272453,16.4136133 C20.5264604,16.41168 20.5248906,16.4101333 20.5237132,16.4085867 L20.5237132,16.4085867 C20.5103698,16.3857733 20.4934943,16.36528 20.4770113,16.3444 L20.4770113,16.3444 C20.4683774,16.33396 20.4609208,16.3219733 20.4518943,16.31192 L20.4518943,16.31192 C20.4385509,16.2972267 20.4228528,16.28524 20.4075472,16.2720933 L20.4075472,16.2720933 C20.392634,16.25856 20.3785057,16.2438667 20.3620226,16.23188 L20.3620226,16.23188 C20.3514264,16.2241467 20.3388679,16.2183467 20.3270943,16.211 L20.3270943,16.211 C20.3043321,16.1966933 20.2819623,16.1823867 20.2580226,16.1707867 L20.2580226,16.1707867 C20.2560604,16.1700133 20.2544906,16.1688533 20.2525283,16.16808 L20.2525283,16.16808 L10.5605132,11.803 C10.2520453,11.6641867 9.88784906,11.7979733 9.74735094,12.1015067 L9.74735094,12.1015067 C9.60685283,12.40504 9.74224906,12.76348 10.0503245,12.9022933 L10.0503245,12.9022933 L18.6654491,16.7821067 L10.3054189,21.57832 L1.45835472,16.5029333 L10.3050264,1.94029333 L14.3178566,8.56621333 C14.4328453,8.75568 14.6361358,8.86085333 14.8453132,8.86085333 L14.8453132,8.86085333 C14.9520604,8.86085333 15.0603774,8.83301333 15.158883,8.7754 L15.158883,8.7754 C15.450083,8.60410667 15.5450566,8.23329333 15.3712,7.94677333 L15.3712,7.94677333 L10.8320906,0.4524 C10.8277736,0.444666667 10.8211019,0.438866667 10.8163925,0.43152 L10.8163925,0.43152 C10.8042264,0.413346667 10.7912755,0.396333333 10.7771472,0.37932 L10.7771472,0.37932 C10.7645887,0.36424 10.7516377,0.349933333 10.7382943,0.3364 L10.7382943,0.3364 C10.7245585,0.322866667 10.7100377,0.310493333 10.6943396,0.297733333 L10.6943396,0.297733333 C10.6770717,0.283813333 10.6601962,0.271053333 10.6417509,0.259066667 L10.6417509,0.259066667 C10.6342943,0.254426667 10.6284075,0.247853333 10.6205585,0.2436 L10.6205585,0.2436 C10.6119245,0.238573333 10.6032906,0.235866667 10.5946566,0.231613333 L10.5946566,0.231613333 C10.5754264,0.221173333 10.5554113,0.21228 10.5346113,0.203773333 L10.5346113,0.203773333 C10.5169509,0.196813333 10.4992906,0.190626667 10.4816302,0.185213333 L10.4816302,0.185213333 C10.4620075,0.179413333 10.4423849,0.174773333 10.4223698,0.171293333 L10.4223698,0.171293333 C10.4035321,0.167426667 10.3843019,0.163946667 10.3650717,0.1624 L10.3650717,0.1624 C10.3450566,0.160466667 10.3246491,0.16008 10.304634,0.16008 Z" id="Fill-7" fill="url(#linearGradient-12)" mask="url(#mask-11)"/>
                            </g>
                        </g>
                    </g>
                </g>
            </g>
        </g>
      </svg>
    </span>
    <div class="sp-gas-num">{{gasprice}}</div>
  </div>
</template>

<script>
module.exports = {
  data() {
    return {
      gas: {rapid: 0, fast: 0, standard: 0, slow: 0, timestamp: 0}
    }
  },

  computed: {
    gasprice() {
      return Math.round(this.gas.fast)
    }
  },

  created() {
    this.init()
  },

  methods: {
    init() {
      this.fetchData()
      setInterval(() => {
        this.fetchData()
      }, 10000)
    },
   async fetchData() {
      this.gas = await this.getCurrentGasPrices()
    },
    async getCurrentGasPrices() {
        let response = await this.$axios.get('https://ethgasstation.info/json/ethgasAPI.json')
        let prices = {
            slow: response.data.safeLow / 10,
            standard: response.data.average / 10,
            fast: response.data.fast / 10,
            timestamp: Date.now()
        }

        return prices;
    }
  }
}
</script>

<style>
.sp-gas {
  display: flex;
  position: absolute;
  bottom: 0;
  align-items: center;
  padding: 10px;
  background: rgba(0, 0, 0, 0.3);
  justify-content: space-between;
  width: 74px;
}

.sp-gas-num {
  margin-left: 5px;
  color: #ddd;
  font-size: 14px;
}

</style>